<template>
    <div class="messagelist">
        <div class="content">
            <div class="title">{{info.title}}</div>
            <div class="info-box">
                <div class="info-top">
                    <img class="headIcon" :src="info.logo" alt="">
                    <div class="info-right">
                        <div class="info-name">{{info.user_name}}</div>
                        <div class="info-time">{{info.create_time}}</div>
                    </div>
                </div>
                <div class="detail-text">{{info.content}}</div>
            </div>
            <div class="subtitle"><img src="http://img.xuannang.net/taolunqu@2x.png" alt="">讨论区</div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="item in list" :key="item.index">
                    <div class="list-box">
                        <img class="list-headIcon" :src="item.logo" alt="">
                        <div class="list-info">
                            <div class="list-name">{{item.user_name}} 
                                <img v-show="item.is_official == 1" src="http://img.xuannang.net/guanfang@2x.png"/> 
                                <img v-show="userId == item.user_id" src="http://img.xuannang.net/louzhu@2x.png"/>
                            </div>
                            <div class="list-time">{{item.create_time}}</div>
                            <div class="list-content">{{item.content}}</div>
                        </div>
                    </div>
                </div>
            </van-list>
            <div style="height:1.333333rem"></div>
            <div class="comment"  v-if="isShareState == 0">
                <div class="inputs" @click="isFocus">
                    <span class="input-box"><img class="inputIcons" src="http://img.xuannang.net/xiepinglun@2x.png" alt=""></span>
                    <span class="input-box"><input class="input-text" type="text" disabled placeholder="写评论..."/></span>
                </div>
                <span class="isShare" @click="changeShare">
                    <img class="sIcon" src="http://img.xuannang.net/fenxiang@2x.png" alt="">
                    <div>分享</div>
                </span>
            </div>
        </div>
        <!-- 没有更多了 -->
        <div v-if="finished" class="notMore">——&nbsp;没有更多了&nbsp;——</div>

        <!-- 下载按钮 -->
       <div class="bottom-down" v-show="isShareBtn">
            <img src="http://img.xuannang.net/share/64.png" alt="" class="logo"> 
            <div class="title">更多精彩内容，尽在帮瓜视频</div>
            <div class="right-box">
                <img src="http://img.xuannang.net/share/xiazaiapp.png" alt="" @click="goDown" class="down"> 
                <img src="http://img.xuannang.net/share/guanbi@2x.png" @click="closeShare" alt="" class="close-down">
            </div>
        
        </div>
        <!-- 评论弹框 -->
     
        <van-popup v-model="show" @click-overlay="cancelComment"></van-popup>
        <div class="Shares" v-show="show">
            <div class="s-title">
                <span class="cancelBtn" @click="cancelComment">取消</span>
                <span class="saveBtn" @click="getSubmitComment">确定</span>
            </div>
            <textarea class="textateas" v-model="commentValue" placeholder="请输入您的看法吧..."></textarea>
        </div>
        
    </div>
</template>
<script>
import { Toast,Field,List,Popup,Dialog  } from 'vant';
import {getDetail,getProblemList,getSubmitComment} from '@/api/message'

export default {
    name:'messageDetail',
    //声明组件
    components:{
        [Field.name]:Field,
        [Toast.name]:Toast,
        [List.name]:List,
        [Popup.name]:Popup,
        [Dialog.name]:Dialog 

    },
    data(){
        return {
            loading:false,//加载中
            finished:false,//加载完成
            show:false,//分享弹框
            userId:0,//发布问题者用户id
            id:0,//问题id
            token:'',//登录用户的token
            info:{},//问题详情
            list:[],//评论列表
            commentValue:'',//评论内容
            pageIndex:1,
            pageSize:10,
            total:0,//总条数
            isShareState:0,//0 未分享 1分享后
            isShareBtn:false,//是否显示下载按钮
        }
    },
    created(){
        this.loading = true;//开始加载
        if(this.$route.query.token){
            this.token = this.$route.query.token;
        }
        //获取token,问题id，用户id
        if(this.$route.query.id){
            this.id = this.$route.query.id;
            this.getDetail();//获取留言列表
            this.getProblemList();//评论列表
        }
        // isShare
        if(this.$route.query.isShareState && this.$route.query.isShareState>0){
            this.isShareState = this.$route.query.isShareState;
            this.isShareBtn = true;
        }else{
            this.isShareState = 0;
            this.isShareBtn = false;
        }
        // console.log(this.isShareState)
        // console.log(this.isShareBtn)
    },
    methods:{
        //获取留言详情
        getDetail(){
            getDetail(this.id,this.token).then(res => {
                if(res.code == 200){
                    console.log(res.data)
                    this.info = res.data;
                    this.userId = res.data.user_id;//楼主
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                }
            })
        },
        //评论列表
        getProblemList(){
            getProblemList(this.id,this.pageIndex,this.pageSize).then(res => {
                if(res.code == 200){
                    if(this.pageIndex == 1){
                        this.list = res.data.list;
                    }else {
                        let lists = this.list;
                        this.list = lists.concat(res.data.list);
                    }
                    this.total = res.data.total;
                    //加载状态
                    this.loading = false;
                    this.finished = false;
                    
                }
            })
        },
        //点击打开评论
        isFocus(){
            this.show = true;
        },
        //取消评论框
        cancelComment(){
            this.show = false;
            this.commentValue = '';
        },
        //提交评论
        getSubmitComment(){
            let that = this;
            // Toast(that.commentValue);
            
            if(!that.commentValue){
                Toast('评论内容不能为空！');
            }else {
                getSubmitComment(that.token,that.id,that.commentValue).then(res => {
                    if(res.code == 200){
                        Toast('评论成功！');
                        that.show = false;
                        that.commentValue = '';
                        setTimeout(function(){
                            that.pageIndex = 1;
                            that.getProblemList();//刷新数据
                        },300)
                        
                    }else if(res.code == 403){
                        Dialog.alert({
                            title: '提示',
                            message: '您的账号被挤下线，请重新登录',
                            confirmButtonText:'去登陆'
                        }).then(() => {
                            //跳转原生登录
                            let para = {};
                            para.linkType = "login";
                            that.interaction.hLinkToApp(para);
                        });
                    }else {
                        Toast.fail('评论失败！');
                        that.show = false;
                        that.commentValue = '';
                    }
                })
            }

        },
        // 上滑懒加载
        onLoad(){
            setTimeout(()=>{
                this.pageIndex++;
                if(this.list.length != this.total){
                    this.getProblemList();//加载更多
                }else {
                    //加载状态
                    this.finished = true;
                    this.loading = false;
                    
                }
            },500);
        },
        //点击分享,打开分享弹框
        changeShare(){
            this.isShare();
        },
        //分享
        isShare(){
             /*
            6.调用原生分享 hShare
            参数：
                标题：title
                副标题：subTitle
                封面图：headImg
                内容：content
                路径：url
            调用示例：
                let para = {};
                para.title = "XXX邀您加入优程旅行";
                para.subTitle = "快来加入我们吧！";
                this.interaction.hShare(para);		
            * */
           let para = {};
           para.title =  this.info.title;
           para.subTitle = '来自帮瓜视频的分享';
           para.content = '来自帮瓜视频的分享';
           para.headImg = '';
           para.url = '/messageDetail?isShareState=1&id='+this.id+'&userId=0';
           this.interaction.hShare(para);
        },
        // 关闭分享之后的下载
        closeShare(){
            this.isShareBtn = false;
        },
        // 跳转到下载
        goDown(){
            window.location.href = 'https://fir.im/g68x';//下载地址
        },
    }
    
}

</script>

<style lang="stylus" scoped>
 .messagelist{
    width :100%;
    height :100%;
    box-sizing :border-box;
    overflow-x :hidden;
    .content{
        padding:.266667rem;
        width :100%;
        box-sizing :border-box;
        .title {
            font-size:.4rem;
            color:#494949;
            line-height :.8rem;
        }
        .info-box {
            .info-top {
                margin-top :.266667rem;
                margin-bottom :.213333rem;
                width:100%;
                display:inline-block;
                .headIcon {
                    width :.8rem;
                    height :.8rem;
                    border-radius :100%;
                    float:left;
                }
                .info-right {
                    float:left;
                    margin-left :.186667rem;
                    .info-name {
                        font-size:.32rem;
                        color:#494949;
                        margin-bottom :.133333rem;
                    }
                    .info-time {
                        font-size:.266667rem;
                        color:#a2a2a2;
                    }
                }
            }
            .detail-text {
                padding-bottom :.266667rem;
                font-size:.373333rem;
                color:#494949;
                line-height :.666667rem;
                border-bottom :.026667rem solid #f1f1f1;
            }
        }
        .subtitle {
            margin-top :.4rem;
            margin-bottom :.8rem;
            font-size:.426667rem;
            color:#494949;
            img {
                width:.48rem;
                height:.48rem;
                margin-right :.133333rem;
                vertical-align :top;
            }
        }
        .list-box {
            width:100%;
            display :inline-block;
            .list-headIcon {
                width:.8rem;
                height :.8rem;
                border-radius :100%;
                float:left;
            }
            .list-info {
                float:left;
                margin-left :.133333rem;
                .list-name {
                    font-size:.32rem;
                    color:#494949; 
                    img {
                        width:.88rem;
                        height:.426667rem;
                        margin-left :.266667rem;
                    }
                }
                .list-time {
                    margin-top :.133333rem;
                    font-size:.266667rem;
                    color:#a2a2a2; 
                }
                .list-content {
                    width:8.266667rem;
                    line-height :.533333rem;
                    margin-top :.213333rem;
                    font-size:.373333rem;
                    color:#494949;
                    padding-bottom :.4rem;
                }
            }

        }
        .comment {
            position:fixed;
            bottom :0;
            left :0;
            height:1.333333rem;
            overflow-x :hidden;
            width:100%;
            background:#ffffff;
            box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
            padding-top:.266667rem;
            .inputs {
                background:#f1f1f1;
                border-radius:2.666667rem;
                width:8.106667rem;
                height:1.013333rem;
                float :left;
                margin-left: 0.266667rem;
                .input-box {
                    height:.88rem;
                    vertical-align :middle;
                    font-size:.266667rem;
                    .input-text {
                        background:#f1f1f1;
                        height:.75rem;
                        width:7rem;
                    }
                    .inputIcons {
                        width:.24rem;
                        height:.346667rem;
                        margin-left:.4rem;
                    }
                }
                
            }
            .isShare {
                float:left;
                font-size:.266667rem;
                color:#494949;
                text-align :center;
                margin-left:.533333rem;
                .sIcon {
                    width:.453333rem;
                    height:.453333rem;
                    margin-bottom :.16rem;
                }
            }
        }   
    }
    //没有更多
    .notMore {
        width: 100%;
         box-sizing :border-box;
        height: 1.066667rem;
        line-height: 1.066667rem;
        font-size: .373333rem;
        color: #A2A2A2;
        text-align: center;  
    }
    //分享弹框
    .Shares {
        width :100%;
         box-sizing :border-box;
        background:#ffffff;
        position:fixed;
        bottom :0;
        z-index :3000;
        .s-title {
            width :100%;
            font-size :.373333rem;
            line-height: 1.066667rem;
            .cancelBtn {
                color :#A2A2A2;
                margin-left:.266667rem;
            }
            .saveBtn {
                color:#1c90ff;
                float:right;
                margin-right:.266667rem;
            }
        }
        .textateas {
            width:93%;
            height:2.133333rem;
            padding:.266667rem;
            font-size :.373333rem;
        }
        .share-info {
            display :inline-block;
            width :100%;
            margin-top :.4rem;
            margin-bottom :.4rem;
            .share-item {
                float:left;
                width:33%;
                text-align :center;
                .shareIcon {
                    width:1.066667rem;
                    height:1.066667rem;
                }
                .shareText {
                    font-size:.373333rem;
                    color :#494949;
                    margin-top :.133333rem;
                }
            }
        }
        .cancelBtn {
            width:100%;
            font-size :.373333rem;
            color :#1c90ff;
            background:#ffffff;
            height:1.066667rem;
        }
    }
}    
.bottom-down{
    padding: 0 2.8%;
    width: 100%;
    height:45px;
    line-height :45px;
    background:rgba(0,0,0,.7);
    position:fixed;
    bottom: 0;
    left: 0;
    .logo{
        width :28px;
        height :28px;
        float :left;
        margin-top :9px;
    }
    .title{
        float: left;
        font-family: PingFangSC-Regular;
        font-size: .32rem;
        color: #353535;
        letter-spacing: .003733rem;
        margin-left: .14rem;
        color :#fff;
    }
    .right-box{
        position: absolute;
        right :12%;
        height:45px;
        line-height :45px;
        .down{
            height: .693333rem;
            top: .18rem;
            float :left;
            position: relative;
            top: 50%;
            transform :translateY(-50%);
            margin-left: 0.133333rem;
        }
        .close-down{
            width:10px;
            height:10px;
            float :left;
            position: relative;
            top: 50%;
            transform :translateY(-50%);
            right: -0.4rem;
        }
    }
 
}
</style>